<template>
  <div class="lottery-generator-container">
    <a-card title="彩票号码生成器" class="lottery-card">
      <div class="lottery-type-selector">
        <a-radio-group v-model:value="lotteryType" button-style="solid">
          <a-radio-button value="ssq">双色球</a-radio-button>
          <a-radio-button value="3d">福彩3D</a-radio-button>
          <a-radio-button value="qlc">七乐彩</a-radio-button>
          <a-radio-button value="dlt">大乐透</a-radio-button>
          <a-radio-button value="qxc">七星彩</a-radio-button>
          <a-radio-button value="pl5">排列5</a-radio-button>
        </a-radio-group>
      </div>

      <div class="lottery-settings">
        <div class="group-count-selector">
          <span class="setting-label">生成组数：{{ groupCount }}组</span>
          <a-slider v-model:value="groupCount" :min="1" :max="5" :disabled="isGenerating" :marks="sliderMarks" class="group-slider" />
        </div>
      </div>

      <div class="controls">
        <a-button type="primary" @click="generateNumbers" :disabled="isGenerating">
          {{ isGenerating ? '生成中...' : '生成号码' }}
        </a-button>
        <a-button @click="clearNumbers" :disabled="!(hasNumbers || has3DNumbers || hasQLCNumbers || hasDLTNumbers || hasQXCNumbers || hasPL5Numbers) || isGenerating"> 清空 </a-button>
        <a-button @click="copyToClipboard" :disabled="!(hasNumbers || has3DNumbers || hasQLCNumbers || hasDLTNumbers || hasQXCNumbers || hasPL5Numbers) || isGenerating"> 复制 </a-button>
      </div>

      <!-- 双色球结果显示 -->
      <div class="lottery-result-wrapper" v-if="(hasNumbers || isGenerating) && lotteryType === 'ssq'">
        <div class="lottery-result lottery-result-ssq">
          <div v-for="(group, groupIndex) in displaySSQGroups" :key="`ssq-group-${groupIndex}`" class="ssq-group">
            <div class="group-label">第{{ groupIndex + 1 }}组</div>
            <div class="ball-container">
              <div v-for="(num, index) in group.redBalls" :key="`red-${groupIndex}-${index}`" class="ball red-ball" :class="{ rolling: isGenerating && !stoppedSSQIndexes.includes(`${groupIndex}-${index}`) }">
                {{ num }}
              </div>
              <div class="ball-separator">+</div>
              <div class="ball blue-ball" :class="{ rolling: isGenerating && !stoppedSSQIndexes.includes(`${groupIndex}-6`) }">
                {{ group.blueBall }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 3D彩票结果显示 -->
      <div class="lottery-result-wrapper" v-if="(has3DNumbers || isGenerating) && lotteryType === '3d'">
        <div class="lottery-result lottery-result-3d">
          <div v-for="(group, groupIndex) in display3DBalls" :key="`group-${groupIndex}`" class="d3-group">
            <div class="group-label">第{{ groupIndex + 1 }}组</div>
            <div class="ball-container">
              <div v-for="(num, index) in group" :key="`3d-${groupIndex}-${index}`" class="ball d3-ball" :class="{ rolling: isGenerating && !stopped3DIndexes.includes(`${groupIndex}-${index}`) }">
                {{ num }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 七乐彩结果显示 -->
      <div class="lottery-result-wrapper" v-if="(hasQLCNumbers || isGenerating) && lotteryType === 'qlc'">
        <div class="lottery-result lottery-result-qlc">
          <div v-for="(group, groupIndex) in displayQLCGroups" :key="`qlc-group-${groupIndex}`" class="qlc-group">
            <div class="group-label">第{{ groupIndex + 1 }}组</div>
            <div class="ball-container">
              <div v-for="(num, index) in group" :key="`qlc-${groupIndex}-${index}`" class="ball qlc-ball" :class="{ rolling: isGenerating && !stoppedQLCIndexes.includes(`${groupIndex}-${index}`) }">
                {{ num }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加大乐透结果显示 -->
      <div class="lottery-result-wrapper" v-if="(hasDLTNumbers || isGenerating) && lotteryType === 'dlt'">
        <div class="lottery-result lottery-result-dlt">
          <div v-for="(group, groupIndex) in displayDLTGroups" :key="`dlt-group-${groupIndex}`" class="dlt-group">
            <div class="group-label">第{{ groupIndex + 1 }}组</div>
            <div class="ball-container">
              <div v-for="(num, index) in group.frontBalls" :key="`dlt-front-${groupIndex}-${index}`" class="ball dlt-front-ball" :class="{ rolling: isGenerating && !stoppedDLTIndexes.includes(`${groupIndex}-${index}`) }">
                {{ num }}
              </div>
              <div class="ball-separator">+</div>
              <div v-for="(num, index) in group.backBalls" :key="`dlt-back-${groupIndex}-${index + 5}`" class="ball dlt-back-ball" :class="{ rolling: isGenerating && !stoppedDLTIndexes.includes(`${groupIndex}-${index + 5}`) }">
                {{ num }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加七星彩结果显示 -->
      <div class="lottery-result-wrapper" v-if="(hasQXCNumbers || isGenerating) && lotteryType === 'qxc'">
        <div class="lottery-result lottery-result-qxc">
          <div v-for="(group, groupIndex) in displayQXCGroups" :key="`qxc-group-${groupIndex}`" class="qxc-group">
            <div class="group-label">第{{ groupIndex + 1 }}组</div>
            <div class="ball-container">
              <div v-for="(num, index) in group" :key="`qxc-${groupIndex}-${index}`" class="ball qxc-ball" :class="{ rolling: isGenerating && !stoppedQXCIndexes.includes(`${groupIndex}-${index}`) }">
                {{ num }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加排列5结果显示 -->
      <div class="lottery-result-wrapper" v-if="(hasPL5Numbers || isGenerating) && lotteryType === 'pl5'">
        <div class="lottery-result lottery-result-pl5">
          <div v-for="(group, groupIndex) in displayPL5Groups" :key="`pl5-group-${groupIndex}`" class="pl5-group">
            <div class="group-label">第{{ groupIndex + 1 }}组</div>
            <div class="ball-container">
              <div v-for="(num, index) in group" :key="`pl5-${groupIndex}-${index}`" class="ball pl5-ball" :class="{ rolling: isGenerating && !stoppedPL5Indexes.includes(`${groupIndex}-${index}`) }">
                {{ num }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <a-divider />

      <div class="lottery-info">
        <h3>{{ lotteryType === 'ssq' ? '双色球规则说明' : lotteryType === '3d' ? '福彩3D规则说明' : lotteryType === 'qlc' ? '七乐彩规则说明' : lotteryType === 'dlt' ? '超级大乐透规则说明' : lotteryType === 'qxc' ? '七星彩规则说明' : '排列5规则说明' }}</h3>
        <div v-if="lotteryType === 'ssq'">
          <p>双色球由6个红球和1个蓝球组成：</p>
          <ul>
            <li>红球：从1-33中选择6个不重复的号码</li>
            <li>蓝球：从1-16中选择1个号码</li>
          </ul>
          <a-divider />
          <h4>中奖规则</h4>
          <a-table :dataSource="ssqPrizeRules" :columns="ssqPrizeColumns" :pagination="false" size="small" bordered />
        </div>
        <div v-else-if="lotteryType === '3d'">
          <p>福彩3D由3个数字组成：</p>
          <ul>
            <li>每个位置的数字范围是0-9</li>
            <li>可以重复选择相同的数字</li>
          </ul>
          <a-divider />
          <h4>中奖规则</h4>
          <a-table :dataSource="d3PrizeRules" :columns="d3PrizeColumns" :pagination="false" size="small" bordered />
        </div>
        <div v-else-if="lotteryType === 'qlc'">
          <p>七乐彩由7个号码组成：</p>
          <ul>
            <li>从1-30中选择7个不重复的号码</li>
          </ul>
          <a-divider />
          <h4>中奖规则</h4>
          <a-table :dataSource="qlcPrizeRules" :columns="qlcPrizeColumns" :pagination="false" size="small" bordered />
        </div>
        <div v-else-if="lotteryType === 'dlt'">
          <p>超级大乐透由前区5个号码和后区2个号码组成：</p>
          <ul>
            <li>前区：从1-35中选择5个不重复的号码</li>
            <li>后区：从1-12中选择2个不重复的号码</li>
          </ul>
          <a-divider />
          <h4>中奖规则</h4>
          <a-table :dataSource="dltPrizeRules" :columns="dltPrizeColumns" :pagination="false" size="small" bordered />
        </div>
        <div v-else-if="lotteryType === 'qxc'">
          <p>七星彩由7个数字组成：</p>
          <ul>
            <li>每个位置的数字范围是0-9</li>
            <li>可以重复选择相同的数字</li>
          </ul>
          <a-divider />
          <h4>中奖规则</h4>
          <a-table :dataSource="qxcPrizeRules" :columns="qxcPrizeColumns" :pagination="false" size="small" bordered />
        </div>
        <div v-else-if="lotteryType === 'pl5'">
          <p>排列5由5个数字组成：</p>
          <ul>
            <li>每个位置的数字范围是0-9</li>
            <li>可以重复选择相同的数字</li>
          </ul>
          <a-divider />
          <h4>中奖规则</h4>
          <a-table :dataSource="pl5PrizeRules" :columns="pl5PrizeColumns" :pagination="false" size="small" bordered />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'

// 彩票类型
const lotteryType = ref('ssq') // 'ssq'表示双色球，'3d'表示福彩3D

// 生成组数（用于所有彩票类型）
const groupCount = ref(1)

// 滑动条标记
const sliderMarks = {
  1: '1组',
  2: '2组',
  3: '3组',
  4: '4组',
  5: '5组'
}

// 双色球数据
const ssqGroups = ref([]) // 存储多组双色球结果
const displaySSQGroups = ref([]) // 用于显示的双色球号码
const stoppedSSQIndexes = ref([]) // 记录已经停止滚动的双色球的索引

// 3D彩票数据
const d3Numbers = ref([]) // 二维数组，每组3个数字
const display3DBalls = ref([]) // 用于显示的3D号码
const stopped3DIndexes = ref([]) // 记录已经停止滚动的3D球的索引

// 七乐彩数据
const qlcGroups = ref([]) // 存储多组七乐彩结果
const displayQLCGroups = ref([]) // 用于显示的七乐彩号码
const stoppedQLCIndexes = ref([]) // 记录已经停止滚动的七乐彩球的索引

// 大乐透数据
const dltGroups = ref([]) // 存储多组大乐透结果
const displayDLTGroups = ref([]) // 用于显示的大乐透号码
const stoppedDLTIndexes = ref([]) // 记录已经停止滚动的大乐透球的索引

// 七星彩数据
const qxcGroups = ref([]) // 存储多组七星彩结果
const displayQXCGroups = ref([]) // 用于显示的七星彩号码
const stoppedQXCIndexes = ref([]) // 记录已经停止滚动的七星彩球的索引

// 排列5数据
const pl5Groups = ref([]) // 存储多组排列5结果
const displayPL5Groups = ref([]) // 用于显示的排列5号码
const stoppedPL5Indexes = ref([]) // 记录已经停止滚动的排列5球的索引

// 生成状态
const isGenerating = ref(false)

// 判断是否有号码
const hasNumbers = computed(() => {
  return (lotteryType.value === 'ssq' && ssqGroups.value.length > 0) || (isGenerating.value && lotteryType.value === 'ssq')
})

const has3DNumbers = computed(() => {
  return (lotteryType.value === '3d' && d3Numbers.value.length > 0) || (isGenerating.value && lotteryType.value === '3d')
})

const hasQLCNumbers = computed(() => {
  return (lotteryType.value === 'qlc' && qlcGroups.value.length > 0) || (isGenerating.value && lotteryType.value === 'qlc')
})

const hasDLTNumbers = computed(() => {
  return (lotteryType.value === 'dlt' && dltGroups.value.length > 0) || (isGenerating.value && lotteryType.value === 'dlt')
})

const hasQXCNumbers = computed(() => {
  return (lotteryType.value === 'qxc' && qxcGroups.value.length > 0) || (isGenerating.value && lotteryType.value === 'qxc')
})

const hasPL5Numbers = computed(() => {
  return (lotteryType.value === 'pl5' && pl5Groups.value.length > 0) || (isGenerating.value && lotteryType.value === 'pl5')
})

// 生成随机数字（范围：min到max）
const getRandomNumber = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min
}

// 生成不重复的随机数组
const generateUniqueRandomNumbers = (count, min, max) => {
  const numbers = []
  while (numbers.length < count) {
    const num = getRandomNumber(min, max)
    if (!numbers.includes(num)) {
      numbers.push(num)
    }
  }
  return numbers.sort((a, b) => a - b) // 按升序排序
}

// 生成彩票号码
const generateNumbers = () => {
  if (isGenerating.value) return

  isGenerating.value = true

  if (lotteryType.value === 'ssq') {
    generateSSQ()
  } else if (lotteryType.value === '3d') {
    generate3D()
  } else if (lotteryType.value === 'qlc') {
    generateQLC()
  } else if (lotteryType.value === 'dlt') {
    generateDLT()
  } else if (lotteryType.value === 'qxc') {
    generateQXC()
  } else {
    generatePL5()
  }
}

// 生成双色球号码
const generateSSQ = () => {
  stoppedSSQIndexes.value = []

  // 初始化显示数组
  displaySSQGroups.value = Array(groupCount.value)
    .fill()
    .map(() => ({
      redBalls: Array(6).fill('?'),
      blueBall: '?'
    }))

  // 生成最终结果
  const finalGroups = []
  for (let i = 0; i < groupCount.value; i++) {
    finalGroups.push({
      redBalls: generateUniqueRandomNumbers(6, 1, 33),
      blueBall: getRandomNumber(1, 16)
    })
  }

  // 所有球同时开始滚动
  const allBallsInterval = setInterval(() => {
    // 更新所有未停止的球
    for (let groupIndex = 0; groupIndex < groupCount.value; groupIndex++) {
      // 更新红球
      for (let i = 0; i < 6; i++) {
        if (!stoppedSSQIndexes.value.includes(`${groupIndex}-${i}`)) {
          displaySSQGroups.value[groupIndex].redBalls[i] = getRandomNumber(1, 33)
        }
      }

      // 更新蓝球
      if (!stoppedSSQIndexes.value.includes(`${groupIndex}-6`)) {
        displaySSQGroups.value[groupIndex].blueBall = getRandomNumber(1, 16)
      }
    }
  }, 50)

  // 依次停止每个球的滚动
  let currentGroup = 0
  let currentPosition = 0

  const stopSSQRolling = () => {
    const index = `${currentGroup}-${currentPosition}`
    stoppedSSQIndexes.value.push(index)

    // 设置最终数字
    if (currentPosition < 6) {
      // 红球
      displaySSQGroups.value[currentGroup].redBalls[currentPosition] = finalGroups[currentGroup].redBalls[currentPosition]
    } else {
      // 蓝球
      displaySSQGroups.value[currentGroup].blueBall = finalGroups[currentGroup].blueBall
    }

    // 移动到下一个位置
    currentPosition++
    if (currentPosition > 6) {
      // 6个红球 + 1个蓝球 = 7个位置
      currentPosition = 0
      currentGroup++
    }

    // 检查是否所有球都已停止
    if (currentGroup >= groupCount.value) {
      // 全部停止后，清除定时器并更新最终结果
      clearInterval(allBallsInterval)
      ssqGroups.value = JSON.parse(JSON.stringify(finalGroups))
      isGenerating.value = false
    } else {
      // 继续停止下一个球
      setTimeout(stopSSQRolling, 200)
    }
  }

  // 开始动画，延迟一段时间后开始停止球
  setTimeout(stopSSQRolling, 1000)
}

// 生成3D彩票号码
const generate3D = () => {
  stopped3DIndexes.value = []

  // 初始化显示数组
  display3DBalls.value = Array(groupCount.value)
    .fill()
    .map(() => Array(3).fill('?'))

  // 生成最终结果
  const finalNumbers = []
  for (let i = 0; i < groupCount.value; i++) {
    const group = []
    for (let j = 0; j < 3; j++) {
      group.push(getRandomNumber(0, 9))
    }
    finalNumbers.push(group)
  }

  // 所有球同时开始滚动
  const allBallsInterval = setInterval(() => {
    // 更新所有未停止的球
    for (let i = 0; i < groupCount.value; i++) {
      for (let j = 0; j < 3; j++) {
        if (!stopped3DIndexes.value.includes(`${i}-${j}`)) {
          display3DBalls.value[i][j] = getRandomNumber(0, 9)
        }
      }
    }
  }, 50)

  // 依次停止每个球的滚动
  let currentGroup = 0
  let currentPosition = 0

  const stop3DRolling = () => {
    const index = `${currentGroup}-${currentPosition}`
    stopped3DIndexes.value.push(index)

    // 设置最终数字
    display3DBalls.value[currentGroup][currentPosition] = finalNumbers[currentGroup][currentPosition]

    // 移动到下一个位置
    currentPosition++
    if (currentPosition >= 3) {
      currentPosition = 0
      currentGroup++
    }

    // 检查是否所有球都已停止
    if (currentGroup >= groupCount.value) {
      // 全部停止后，清除定时器并更新最终结果
      clearInterval(allBallsInterval)
      d3Numbers.value = JSON.parse(JSON.stringify(finalNumbers))
      isGenerating.value = false
    } else {
      // 继续停止下一个球
      setTimeout(stop3DRolling, 200)
    }
  }

  // 开始动画，延迟一段时间后开始停止球
  setTimeout(stop3DRolling, 1000)
}

// 生成七乐彩号码
const generateQLC = () => {
  stoppedQLCIndexes.value = []

  // 初始化显示数组
  displayQLCGroups.value = Array(groupCount.value)
    .fill()
    .map(() => Array(7).fill('?'))

  // 生成最终结果
  const finalGroups = []
  for (let i = 0; i < groupCount.value; i++) {
    finalGroups.push(generateUniqueRandomNumbers(7, 1, 30))
  }

  // 所有球同时开始滚动
  const allBallsInterval = setInterval(() => {
    // 更新所有未停止的球
    for (let groupIndex = 0; groupIndex < groupCount.value; groupIndex++) {
      for (let i = 0; i < 7; i++) {
        if (!stoppedQLCIndexes.value.includes(`${groupIndex}-${i}`)) {
          displayQLCGroups.value[groupIndex][i] = getRandomNumber(1, 30)
        }
      }
    }
  }, 50)

  // 依次停止每个球的滚动
  let currentGroup = 0
  let currentPosition = 0

  const stopQLCRolling = () => {
    const index = `${currentGroup}-${currentPosition}`
    stoppedQLCIndexes.value.push(index)

    // 设置最终数字
    displayQLCGroups.value[currentGroup][currentPosition] = finalGroups[currentGroup][currentPosition]

    // 移动到下一个位置
    currentPosition++
    if (currentPosition >= 7) {
      currentPosition = 0
      currentGroup++
    }

    // 检查是否所有球都已停止
    if (currentGroup >= groupCount.value) {
      // 全部停止后，清除定时器并更新最终结果
      clearInterval(allBallsInterval)
      qlcGroups.value = JSON.parse(JSON.stringify(finalGroups))
      isGenerating.value = false
    } else {
      // 继续停止下一个球
      setTimeout(stopQLCRolling, 200)
    }
  }

  // 开始动画，延迟一段时间后开始停止球
  setTimeout(stopQLCRolling, 1000)
}

// 生成大乐透号码
const generateDLT = () => {
  stoppedDLTIndexes.value = []

  // 初始化显示数组
  displayDLTGroups.value = Array(groupCount.value)
    .fill()
    .map(() => ({
      frontBalls: Array(5).fill('?'),
      backBalls: Array(2).fill('?')
    }))

  // 生成最终结果
  const finalGroups = []
  for (let i = 0; i < groupCount.value; i++) {
    finalGroups.push({
      frontBalls: generateUniqueRandomNumbers(5, 1, 35),
      backBalls: generateUniqueRandomNumbers(2, 1, 12)
    })
  }

  // 所有球同时开始滚动
  const allBallsInterval = setInterval(() => {
    // 更新所有未停止的球
    for (let groupIndex = 0; groupIndex < groupCount.value; groupIndex++) {
      // 更新前区球
      for (let i = 0; i < 5; i++) {
        if (!stoppedDLTIndexes.value.includes(`${groupIndex}-${i}`)) {
          displayDLTGroups.value[groupIndex].frontBalls[i] = getRandomNumber(1, 35)
        }
      }

      // 更新后区球
      for (let i = 0; i < 2; i++) {
        if (!stoppedDLTIndexes.value.includes(`${groupIndex}-${i + 5}`)) {
          displayDLTGroups.value[groupIndex].backBalls[i] = getRandomNumber(1, 12)
        }
      }
    }
  }, 50)

  // 依次停止每个球的滚动
  let currentGroup = 0
  let currentPosition = 0

  const stopDLTRolling = () => {
    const index = `${currentGroup}-${currentPosition}`
    stoppedDLTIndexes.value.push(index)

    // 设置最终数字
    if (currentPosition < 5) {
      // 前区球
      displayDLTGroups.value[currentGroup].frontBalls[currentPosition] = finalGroups[currentGroup].frontBalls[currentPosition]
    } else {
      // 后区球
      displayDLTGroups.value[currentGroup].backBalls[currentPosition - 5] = finalGroups[currentGroup].backBalls[currentPosition - 5]
    }

    // 移动到下一个位置
    currentPosition++
    if (currentPosition >= 7) {
      // 5个前区 + 2个后区 = 7个位置
      currentPosition = 0
      currentGroup++
    }

    // 检查是否所有球都已停止
    if (currentGroup >= groupCount.value) {
      // 全部停止后，清除定时器并更新最终结果
      clearInterval(allBallsInterval)
      dltGroups.value = JSON.parse(JSON.stringify(finalGroups))
      isGenerating.value = false
    } else {
      // 继续停止下一个球
      setTimeout(stopDLTRolling, 200)
    }
  }

  // 开始动画，延迟一段时间后开始停止球
  setTimeout(stopDLTRolling, 1000)
}

// 生成七星彩号码
const generateQXC = () => {
  stoppedQXCIndexes.value = []

  // 初始化显示数组
  displayQXCGroups.value = Array(groupCount.value)
    .fill()
    .map(() => Array(7).fill('?'))

  // 生成最终结果
  const finalGroups = []
  for (let i = 0; i < groupCount.value; i++) {
    const group = []
    for (let j = 0; j < 7; j++) {
      group.push(getRandomNumber(0, 9))
    }
    finalGroups.push(group)
  }

  // 所有球同时开始滚动
  const allBallsInterval = setInterval(() => {
    // 更新所有未停止的球
    for (let groupIndex = 0; groupIndex < groupCount.value; groupIndex++) {
      for (let i = 0; i < 7; i++) {
        if (!stoppedQXCIndexes.value.includes(`${groupIndex}-${i}`)) {
          displayQXCGroups.value[groupIndex][i] = getRandomNumber(0, 9)
        }
      }
    }
  }, 50)

  // 依次停止每个球的滚动
  let currentGroup = 0
  let currentPosition = 0

  const stopQXCRolling = () => {
    const index = `${currentGroup}-${currentPosition}`
    stoppedQXCIndexes.value.push(index)

    // 设置最终数字
    displayQXCGroups.value[currentGroup][currentPosition] = finalGroups[currentGroup][currentPosition]

    // 移动到下一个位置
    currentPosition++
    if (currentPosition >= 7) {
      currentPosition = 0
      currentGroup++
    }

    // 检查是否所有球都已停止
    if (currentGroup >= groupCount.value) {
      // 全部停止后，清除定时器并更新最终结果
      clearInterval(allBallsInterval)
      qxcGroups.value = JSON.parse(JSON.stringify(finalGroups))
      isGenerating.value = false
    } else {
      // 继续停止下一个球
      setTimeout(stopQXCRolling, 200)
    }
  }

  // 开始动画，延迟一段时间后开始停止球
  setTimeout(stopQXCRolling, 1000)
}

// 生成排列5号码
const generatePL5 = () => {
  stoppedPL5Indexes.value = []

  // 初始化显示数组
  displayPL5Groups.value = Array(groupCount.value)
    .fill()
    .map(() => Array(5).fill('?'))

  // 生成最终结果
  const finalGroups = []
  for (let i = 0; i < groupCount.value; i++) {
    const group = []
    for (let j = 0; j < 5; j++) {
      group.push(getRandomNumber(0, 9))
    }
    finalGroups.push(group)
  }

  // 所有球同时开始滚动
  const allBallsInterval = setInterval(() => {
    // 更新所有未停止的球
    for (let groupIndex = 0; groupIndex < groupCount.value; groupIndex++) {
      for (let i = 0; i < 5; i++) {
        if (!stoppedPL5Indexes.value.includes(`${groupIndex}-${i}`)) {
          displayPL5Groups.value[groupIndex][i] = getRandomNumber(0, 9)
        }
      }
    }
  }, 50)

  // 依次停止每个球的滚动
  let currentGroup = 0
  let currentPosition = 0

  const stopPL5Rolling = () => {
    const index = `${currentGroup}-${currentPosition}`
    stoppedPL5Indexes.value.push(index)

    // 设置最终数字
    displayPL5Groups.value[currentGroup][currentPosition] = finalGroups[currentGroup][currentPosition]

    // 移动到下一个位置
    currentPosition++
    if (currentPosition >= 5) {
      currentPosition = 0
      currentGroup++
    }

    // 检查是否所有球都已停止
    if (currentGroup >= groupCount.value) {
      // 全部停止后，清除定时器并更新最终结果
      clearInterval(allBallsInterval)
      pl5Groups.value = JSON.parse(JSON.stringify(finalGroups))
      isGenerating.value = false
    } else {
      // 继续停止下一个球
      setTimeout(stopPL5Rolling, 200)
    }
  }

  // 开始动画，延迟一段时间后开始停止球
  setTimeout(stopPL5Rolling, 1000)
}

// 清空号码
const clearNumbers = () => {
  if (isGenerating.value) return

  if (lotteryType.value === 'ssq') {
    ssqGroups.value = []
    displaySSQGroups.value = []
  } else if (lotteryType.value === '3d') {
    d3Numbers.value = []
    display3DBalls.value = []
  } else if (lotteryType.value === 'qlc') {
    qlcGroups.value = []
    displayQLCGroups.value = []
  } else if (lotteryType.value === 'dlt') {
    dltGroups.value = []
    displayDLTGroups.value = []
  } else if (lotteryType.value === 'qxc') {
    qxcGroups.value = []
    displayQXCGroups.value = []
  } else {
    pl5Groups.value = []
    displayPL5Groups.value = []
  }
}

// 复制到剪贴板
const copyToClipboard = () => {
  if (isGenerating.value) return

  let text = ''

  if (lotteryType.value === 'ssq' && hasNumbers.value) {
    // 如果还在生成中，使用显示的数字
    const groupsToUse = ssqGroups.value.length > 0 ? ssqGroups.value : displaySSQGroups.value

    text = '双色球号码：\n'
    groupsToUse.forEach((group, index) => {
      // 只复制已经确定的数字（不是问号的）
      if (!group.redBalls.includes('?') && group.blueBall !== '?') {
        text += `第${index + 1}组：${group.redBalls.join(' ')} + ${group.blueBall}\n`
      }
    })

    // 如果没有可复制的内容，提示用户
    if (text === '双色球号码：\n') {
      message.info('请等待号码生成完成后再复制')
      return
    }
  } else if (lotteryType.value === '3d' && has3DNumbers.value) {
    // 如果还在生成中，使用显示的数字
    const numbersToUse = d3Numbers.value.length > 0 ? d3Numbers.value : display3DBalls.value

    text = '福彩3D号码：\n'
    numbersToUse.forEach((group, index) => {
      // 只复制已经确定的数字（不是问号的）
      if (!group.includes('?')) {
        text += `第${index + 1}组：${group.join(' ')}\n`
      }
    })

    // 如果没有可复制的内容，提示用户
    if (text === '福彩3D号码：\n') {
      message.info('请等待号码生成完成后再复制')
      return
    }
  } else if (lotteryType.value === 'qlc' && hasQLCNumbers.value) {
    // 如果还在生成中，使用显示的数字
    const groupsToUse = qlcGroups.value.length > 0 ? qlcGroups.value : displayQLCGroups.value

    text = '七乐彩号码：\n'
    groupsToUse.forEach((group, index) => {
      // 只复制已经确定的数字（不是问号的）
      if (!group.includes('?')) {
        text += `第${index + 1}组：${group.join(' ')}\n`
      }
    })

    // 如果没有可复制的内容，提示用户
    if (text === '七乐彩号码：\n') {
      message.info('请等待号码生成完成后再复制')
      return
    }
  } else if (lotteryType.value === 'dlt' && hasDLTNumbers.value) {
    // 如果还在生成中，使用显示的数字
    const groupsToUse = dltGroups.value.length > 0 ? dltGroups.value : displayDLTGroups.value

    text = '超级大乐透号码：\n'
    groupsToUse.forEach((group, index) => {
      // 只复制已经确定的数字（不是问号的）
      text += `第${index + 1}组：${group.frontBalls.join(' ')} + ${group.backBalls.join(' ')}\n`
    })

    // 如果没有可复制的内容，提示用户
    if (text === '超级大乐透号码：\n') {
      message.info('请等待号码生成完成后再复制')
      return
    }
  } else if (lotteryType.value === 'qxc' && hasQXCNumbers.value) {
    // 如果还在生成中，使用显示的数字
    const groupsToUse = qxcGroups.value.length > 0 ? qxcGroups.value : displayQXCGroups.value

    text = '七星彩号码：\n'
    groupsToUse.forEach((group, index) => {
      // 只复制已经确定的数字（不是问号的）
      text += `第${index + 1}组：${group.join(' ')}\n`
    })

    // 如果没有可复制的内容，提示用户
    if (text === '七星彩号码：\n') {
      message.info('请等待号码生成完成后再复制')
      return
    }
  } else if (lotteryType.value === 'pl5' && hasPL5Numbers.value) {
    // 如果还在生成中，使用显示的数字
    const groupsToUse = pl5Groups.value.length > 0 ? pl5Groups.value : displayPL5Groups.value

    text = '排列5号码：\n'
    groupsToUse.forEach((group, index) => {
      // 只复制已经确定的数字（不是问号的）
      text += `第${index + 1}组：${group.join(' ')}\n`
    })

    // 如果没有可复制的内容，提示用户
    if (text === '排列5号码：\n') {
      message.info('请等待号码生成完成后再复制')
      return
    }
  } else {
    return
  }

  navigator.clipboard
    .writeText(text)
    .then(() => {
      message.success('号码已复制到剪贴板')
    })
    .catch(() => {
      message.error('复制失败，请手动复制')
    })
}

// 中奖规则表格列定义
const ssqPrizeColumns = [
  { title: '奖级', dataIndex: 'level', key: 'level', width: 80 },
  { title: '中奖条件', dataIndex: 'condition', key: 'condition' },
  { title: '奖金', dataIndex: 'prize', key: 'prize', width: 180 }
]

const d3PrizeColumns = [
  { title: '玩法', dataIndex: 'type', key: 'type', width: 100 },
  { title: '中奖条件', dataIndex: 'condition', key: 'condition' },
  { title: '奖金', dataIndex: 'prize', key: 'prize', width: 150 }
]

const qlcPrizeColumns = [
  { title: '奖级', dataIndex: 'level', key: 'level', width: 80 },
  { title: '中奖条件', dataIndex: 'condition', key: 'condition' },
  { title: '奖金', dataIndex: 'prize', key: 'prize', width: 180 }
]

const dltPrizeColumns = [
  { title: '奖级', dataIndex: 'level', key: 'level', width: 80 },
  { title: '中奖条件', dataIndex: 'condition', key: 'condition' },
  { title: '奖金', dataIndex: 'prize', key: 'prize', width: 180 }
]

const qxcPrizeColumns = [
  { title: '奖级', dataIndex: 'level', key: 'level', width: 80 },
  { title: '中奖条件', dataIndex: 'condition', key: 'condition' },
  { title: '奖金', dataIndex: 'prize', key: 'prize', width: 180 }
]

const pl5PrizeColumns = [
  { title: '奖级', dataIndex: 'level', key: 'level', width: 80 },
  { title: '中奖条件', dataIndex: 'condition', key: 'condition' },
  { title: '奖金', dataIndex: 'prize', key: 'prize', width: 180 }
]

// 中奖规则数据
const ssqPrizeRules = [
  { key: '1', level: '一等奖', condition: '6个红球号码和1个蓝球号码全部相符', prize: '浮动（最低500万元）' },
  { key: '2', level: '二等奖', condition: '6个红球号码相符', prize: '浮动' },
  { key: '3', level: '三等奖', condition: '5个红球号码和1个蓝球号码相符', prize: '3000元' },
  { key: '4', level: '四等奖', condition: '5个红球号码相符，或4个红球号码和1个蓝球号码相符', prize: '200元' },
  { key: '5', level: '五等奖', condition: '4个红球号码相符，或3个红球号码和1个蓝球号码相符', prize: '10元' },
  { key: '6', level: '六等奖', condition: '2个红球号码和1个蓝球号码相符，或1个红球号码和1个蓝球号码相符，或只有1个蓝球号码相符', prize: '5元' }
]

const d3PrizeRules = [
  { key: '1', type: '直选', condition: '所选号码与开奖号码一致，且顺序相同', prize: '1000元' },
  { key: '2', type: '组选三', condition: '所选号码与开奖号码一致，且为3个数字中有2个数字相同', prize: '320元' },
  { key: '3', type: '组选六', condition: '所选号码与开奖号码一致，且为3个数字各不相同', prize: '160元' }
]

const qlcPrizeRules = [
  { key: '1', level: '一等奖', condition: '7个号码全部相符', prize: '浮动（最低500万元）' },
  { key: '2', level: '二等奖', condition: '6个号码相符', prize: '浮动' },
  { key: '3', level: '三等奖', condition: '5个号码相符', prize: '浮动' },
  { key: '4', level: '四等奖', condition: '4个号码相符', prize: '200元' },
  { key: '5', level: '五等奖', condition: '3个号码相符', prize: '10元' },
  { key: '6', level: '六等奖', condition: '2个号码相符', prize: '5元' }
]

const dltPrizeRules = [
  { key: '1', level: '一等奖', condition: '前区5个号码和后区2个号码全部相符', prize: '浮动（最低1000万元）' },
  { key: '2', level: '二等奖', condition: '前区5个号码和后区1个号码相符', prize: '浮动' },
  { key: '3', level: '三等奖', condition: '前区5个号码相符', prize: '10000元' },
  { key: '4', level: '四等奖', condition: '前区4个号码和后区2个号码相符', prize: '3000元' },
  { key: '5', level: '五等奖', condition: '前区4个号码和后区1个号码相符', prize: '300元' },
  { key: '6', level: '六等奖', condition: '前区3个号码和后区2个号码相符', prize: '200元' },
  { key: '7', level: '七等奖', condition: '前区4个号码相符', prize: '100元' },
  { key: '8', level: '八等奖', condition: '前区3个号码和后区1个号码相符，或前区2个号码和后区2个号码相符', prize: '15元' },
  { key: '9', level: '九等奖', condition: '前区3个号码相符，或前区1个号码和后区2个号码相符，或前区2个号码和后区1个号码相符，或后区2个号码相符', prize: '5元' }
]

const qxcPrizeRules = [
  { key: '1', level: '一等奖', condition: '7个号码全部相符且顺序一致', prize: '浮动（最低500万元）' },
  { key: '2', level: '二等奖', condition: '最后6位号码相符且顺序一致', prize: '浮动' },
  { key: '3', level: '三等奖', condition: '最后5位号码相符且顺序一致', prize: '浮动' },
  { key: '4', level: '四等奖', condition: '最后4位号码相符且顺序一致', prize: '500元' },
  { key: '5', level: '五等奖', condition: '最后3位号码相符且顺序一致', prize: '30元' },
  { key: '6', level: '六等奖', condition: '最后2位号码相符且顺序一致', prize: '5元' }
]

const pl5PrizeRules = [{ key: '1', level: '一等奖', condition: '5个号码全部相符且顺序一致', prize: '100000元' }]
</script>

<style scoped>
.lottery-generator-container {
  padding: 32px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.lottery-card {
  max-width: 1100px;
  border-radius: 12px;
  margin: 0 auto;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.lottery-card :deep(.ant-card-head) {
  padding: 0 24px;
  font-size: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.lottery-card :deep(.ant-card-body) {
  padding: 32px;
  overflow: visible;
}

.lottery-type-selector {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.lottery-settings {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.group-count-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 300px;
}

.setting-label {
  font-size: 16px;
  margin-bottom: 8px;
}

.group-slider {
  width: 100%;
}

.controls {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  justify-content: center;
}

.controls .ant-btn {
  height: 40px;
  padding: 0 20px;
  font-size: 16px;
}

.lottery-result-wrapper {
  margin: 32px 0;
  border-radius: 16px;
  padding: 16px;
}

.lottery-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lottery-result-3d,
.lottery-result-ssq,
.lottery-result-qlc,
.lottery-result-dlt,
.lottery-result-qxc,
.lottery-result-pl5 {
  margin: 0;
  width: 100%;
}

.ball-container {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 10px 0;
  padding: 0 10px;
  background-color: #fafafa;
  border-radius: 30px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.lottery-result-3d .ball-container,
.lottery-result-ssq .ball-container,
.lottery-result-qlc .ball-container,
.lottery-result-dlt .ball-container,
.lottery-result-qxc .ball-container,
.lottery-result-pl5 .ball-container {
  background-color: rgba(255, 255, 255, 0.5);
}

.ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 28px;
  color: white;
  transition: transform 0.2s;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.red-ball {
  background-color: #f5222d;
  background-image: linear-gradient(145deg, #ff4d4f, #cf1322);
}

.blue-ball {
  background-color: #1890ff;
  background-image: linear-gradient(145deg, #40a9ff, #096dd9);
}

.d3-ball {
  background-color: #f5222d;
  background-image: linear-gradient(145deg, #ff4d4f, #cf1322);
}

.qlc-ball {
  background-color: #52c41a;
  background-image: linear-gradient(145deg, #73d13d, #389e0d);
}

.dlt-front-ball {
  background-color: #f5222d;
  background-image: linear-gradient(145deg, #ff4d4f, #cf1322);
}

.dlt-back-ball {
  background-color: #1890ff;
  background-image: linear-gradient(145deg, #40a9ff, #096dd9);
}

.qxc-ball {
  background-color: #fa8c16;
  background-image: linear-gradient(145deg, #ffa940, #d46b08);
}

.pl5-ball {
  background-color: #722ed1;
  background-image: linear-gradient(145deg, #9254de, #531dab);
}

.d3-group,
.ssq-group,
.qlc-group,
.dlt-group,
.qxc-group,
.pl5-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.group-label {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.ball-separator {
  font-size: 32px;
  font-weight: bold;
  margin: 0 8px;
}

.lottery-info {
  margin-top: 24px;
}

.lottery-info h3 {
  margin-bottom: 12px;
}

.lottery-info ul {
  padding-left: 20px;
}

.lottery-info h4 {
  margin: 16px 0;
  font-size: 18px;
  font-weight: bold;
}

.lottery-info :deep(.ant-table) {
  margin-top: 12px;
  margin-bottom: 24px;
}

.lottery-info :deep(.ant-table-small) {
  font-size: 14px;
}

.lottery-info :deep(.ant-table-thead > tr > th) {
  background-color: #f5f5f5;
  font-weight: bold;
}

.ball.rolling {
  animation: roll 0.3s infinite;
}

@keyframes roll {
  0% {
    transform: translateY(-8px) scale(1.05);
  }
  50% {
    transform: translateY(8px) scale(0.95);
  }
  100% {
    transform: translateY(-8px) scale(1.05);
  }
}

.lottery-result-qlc {
  margin: 0;
  width: 100%;
}
</style>
